﻿<Table TItem="Product" @ref="ProductTable"
       IsStriped="true" IsBordered="true"
       ShowToolbar="true" ShowDefaultButtons="true" ShowAddButton="false" IsMultipleSelect="true" ShowExtendButtons="true"
       OnQueryAsync="@OnQueryEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
    <TableToolbarTemplate>
        <TableToolbarButton TItem="Product" Color="Color.Primary" Icon="fa fa-fw fa-edit" Text="选择" OnClickCallback="@ShowDialog" />
    </TableToolbarTemplate>
    <TableColumns>
        <TableColumn @bind-Field="@context.Type" Readonly="true" />
        <TableColumn @bind-Field="@context.Name" Readonly="true" />
        <TableColumn @bind-Field="@context.Counter" Readonly="true" Width="40" />
        <TableColumn @bind-Field="@context.Sum" Width="60" />
    </TableColumns>
</Table>

<Modal @ref="Modal">
    <ModalDialog Title="选择项目" IsCentered="true">
        <BodyTemplate>
            <Table TItem="Product" IsStriped="true" @bind-SelectedRows="@SelectedRows"
                   ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
                   OnQueryAsync="@OnQueryProductAsync">
                <TableColumns>
                    <TableColumn @bind-Field="@context.Type" />
                    <TableColumn @bind-Field="@context.Name" />
                    <TableColumn @bind-Field="@context.Price" />
                </TableColumns>
            </Table>
        </BodyTemplate>
        <FooterTemplate>
            <Button Text="确定" Icon="fa fa-check-square-o" OnClick="@OnConfirm" />
        </FooterTemplate>
    </ModalDialog>
</Modal>

@code {
    // c# 代码比较多，请查看源代码仓库中代码
    // https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/dev/src/BootstrapBlazor.Shared/Pages/Table/TablesDialog.razor.cs
}